<template>
  <div style="height: 100%" class="workspace">
    <el-container ref="listWarp" style="height: 100%">
      <div class="left">
        <div class="title">
          <div class="area"><span class="line"></span> 校区信息</div>

          <div class="addArea" @click="dialogFormVisibleSchool = true">
            <span style="margin-right: 5px">+</span>新增
          </div>
        </div>
        <div class="statusList">
          <div
            class="item"
            :class="currentIndex === index ? 'activeItem' : ''"
            v-for="(item, index) in schoolList"
            :key="index"
            @click="activeClick(item, index)"
          >
            <div>
              {{ item.name }}
            </div>
            <div>
              <svg-icon
                icon-class="edit"
                style="font-size: 13px; margin-right: 5px"
                @click="event('edit', item)"
              />
              <svg-icon
                icon-class="delete"
                style="font-size: 13px"
                @click="event('del', item)"
              />
            </div>
          </div>
        </div>
      </div>
      <el-container
        style="height: 100%; background: #fff; flex: 1"
        class="right"
      >
        <el-header style="height: auto; padding: 20px 20px 0 20px">
          <div class="title" style="border: none">
            <div class="area"><span class="line"></span> {{ areaName }}</div>
          </div>

          <div class="selectList">
            <div class="btns">
              <div class="add" @click="areaEvent('add')">
                <svg-icon
                  icon-class="add"
                  style="font-size: 13px; margin-right: 5px"
                />新增
              </div>
              <div class="edit" @click="areaEvent('edit')">
                <svg-icon
                  icon-class="edit"
                  style="font-size: 13px; margin-right: 5px"
                />

                编辑
              </div>
              <div class="del" @click="areaEvent('del')">
                <svg-icon
                  icon-class="delete"
                  style="font-size: 13px; margin-right: 5px"
                />

                删除
              </div>
              <div class="ma" @click="areaEvent('code')">
                <svg-icon
                  icon-class="erweima"
                  style="font-size: 13px; margin-right: 5px"
                />

                二维码批量下载
              </div>
              <div class="userBatch" @click="areaEvent('batchInspectorUser')">
                批量设置巡检人员
              </div>
              <div class="user" @click="areaEvent('batchManagerUser')">
                批量设置管理人员
              </div>
            </div>
          </div>
        </el-header>
        <el-main style="height: 100%">
          <div class="content" style="height: calc(100% - 45px)">
            <el-table
              :data="tableData"
              height="100%"
              style="width: 100%"
              border
              v-loading="loading"
              tooltip-effect="light"
              highlight-current-row
              @row-dblclick="tableDbEdit"
              @current-change="evtTableRowChange"
              @selection-change="handleSelectionChange"
              ref="dataListTable"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                type="index"
                width="50"
                label="序号"
              ></el-table-column>

              <el-table-column
                prop="name"
                label="区域名称"
                width="160"
              ></el-table-column>
              <el-table-column
                prop="address"
                label="区域地址"
                width="160"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                width="160"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="buildingName"
                label="巡检人员"
                minWidth="340px"
              >
                <template slot-scope="scope">
                  <div style="display: flex">
                    <div class="users">
                      <div
                        v-for="(item, index) in scope.row.inspectorUser"
                        :key="item.id"
                        class="user-item"
                      >
                        {{ item.userName }}
                        <svg-icon
                          icon-class="close"
                          style="font-size: 13px; margin-right: 3px"
                          @click="delUser(item, scope.row)"
                        />
                      </div>
                    </div>
                    <div class="addArea" @click="addUser(scope.row, '1')">
                      <span style="margin-right: 5px">+</span>新增
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="roomName"
                label="管理人员"
                minWidth="340px"
              >
                <template slot-scope="scope">
                  <div style="display: flex">
                    <div class="users">
                      <div
                        v-for="(item, index) in scope.row.managerUser"
                        :key="item.id"
                        class="user-item"
                      >
                        {{ item.userName }}
                        <svg-icon
                          icon-class="close"
                          style="font-size: 13px; margin-right: 3px"
                          @click="delUser(item, scope.row)"
                        />
                      </div>
                    </div>
                    <div class="addArea" @click="addUser(scope.row, '2')">
                      <span style="margin-right: 5px">+</span>新增
                    </div>
                  </div>
                </template></el-table-column
              >
              <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                  <div
                    style="color: #00b38b; cursor: pointer"
                    @click="downCode(scope.row)"
                  >
                    二维码下载
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <el-footer
              style="height: 45px; background-color: #fff"
              class="page-footer"
            >
              <el-pagination
                style="padding-top: 10px"
                background
                layout="prev, pager, next,jumper,total,sizes"
                @size-change="evtPageSizeChange"
                @current-change="evtPageCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[20, 50, 100, 500]"
                :total="totalRows"
              ></el-pagination>
            </el-footer>
          </div>
        </el-main>
      </el-container>
    </el-container>

    <!-- 新增校区 -->
    <el-dialog
      :visible.sync="dialogFormVisibleSchool"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      title="校区信息"
      width="450px"
    >
      <div v-loading="addloading">
        <div class="win-warp" style="height: 100px">
          <el-form :model="form" :rules="addRules" ref="addForm">
            <el-row class="row-bg" type="flex">
              <el-col :span="20">
                <el-form-item label="校区名称" label-width="80px" prop="name">
                  <el-input
                    ref="name"
                    maxlength="30"
                    v-model="form.name"
                    placeholder="请输入校区名称"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleSchool = false" size="small"
            >取 消</el-button
          >
          <el-button
            @click="addBtn()"
            type="primary"
            size="small"
            style="background: #00b38b; border: none"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 新增区域-->
    <el-dialog
      :visible.sync="dialogFormVisibleArea"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      title="区域信息"
      width="450px"
    >
      <div v-loading="addloading">
        <div class="win-warp" style="height: 230px">
          <el-form :model="formArea" :rules="addRulesArea" ref="addFormArea">
            <el-row class="row-bg" type="flex">
              <el-col :span="24">
                <el-form-item label="校区名称" label-width="80px">
                  <el-input
                    ref="name"
                    maxlength="30"
                    v-model="areaName"
                    placeholder="请输入"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="区域名称" label-width="80px" prop="name">
                  <el-input
                    placeholder="请输入"
                    maxlength="30"
                    v-model="formArea.name"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="区域地址"
                  label-width="80px"
                  prop="address"
                >
                  <el-input
                    v-model="formArea.address"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="80px" prop="remark">
                  <el-input
                    v-model="formArea.remark"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleArea = false" size="small"
            >取 消</el-button
          >
          <el-button
            @click="addBtnArea()"
            type="primary"
            size="small"
            style="background: #00b38b; border: none"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 新增用户 -->
    <el-dialog
      :visible.sync="dialogFormVisibleUser"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      title="添加"
      width="550px"
    >
      <div v-loading="addloading">
        <div class="win-warp" style="height: 300px">
          <el-input
            v-model="username"
            placeholder="请输入名称/账号查找"
            size="small"
            style="margin-bottom: 10px"
            @change="getUserList"
          ></el-input>
          <el-table
            :data="userList"
            height="250px"
            style="width: 100%"
            border
            tooltip-effect="light"
            highlight-current-row
            ref="userTable"
            @selection-change="userSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column
            ><el-table-column prop="name" label="姓名"></el-table-column
            ><el-table-column prop="account" label="账号"></el-table-column
          ></el-table>
        </div>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleUser = false" size="small"
            >取 消</el-button
          >
          <el-button
            @click="addUserConfirm()"
            type="primary"
            size="small"
            style="background: #00b38b; border: none"
            >确定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <!-- 二维码 -->
    <el-dialog
      :visible.sync="dialogCode"
      :close-on-click-modal="false"
      @close="evtDialogClose"
      lock-scroll
      :title="areaName"
      width="620px"
    >
      <div v-loading="addloading">
        <div class="win-warp qrBox" style="height: 420px" id="print">
          <div v-for="(item, index) in codeList" :key="index" class="qrItemBox">
            <div class="qr-code" ref="qrCode"></div>
            <div>{{ item.name }}</div>
          </div>
        </div>
        <div class="dialog-footer">
          <el-button size="small" v-print="printObj">打印</el-button>
          <el-button
            @click="downImg()"
            type="primary"
            size="small"
            style="background: #00b38b; border: none"
            >下载</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { areaApi } from "@/api/patrol/area";
import QRCode from "qrcodejs2";
import JSZip from "jszip";
import FileSaver from "file-saver";
export default {
  data() {
    return {
      printObj: {
        id: "print", //打印的ID，与打印内容的盒子id一致
        popTitle: "区域信息表", //打印的标题
      },
      currentIndex: 0,
      totalRows: 0,
      pageSize: 20,
      currentPage: 1,
      tableData: [],
      schoolList: [],
      saveType: "1", // 1单个 2批量
      userList: [], // 用户
      userSelection: [], // 选中用户
      areaName: "",
      type: "", // 类型
      searchObj: {
        areaId: "",
        name: "",
      },
      username: "",
      loading: false,
      search: [],
      currentRow: null,
      imgsList: [],
      codeList: [],
      multipleSelection: [],
      inspectorUser: [], // 巡检人员
      managerUser: [], // 管理人员
      dialogCode: false,
      // 校区信息

      dialogFormVisibleSchool: false,
      dialogFormVisibleArea: false, // 区域信息
      dialogFormVisibleUser: false,
      addloading: false,
      form: {
        name: "",
      },

      addRules: {
        name: [
          {
            required: true,
            message: "请填写校区名称",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            pattern: /^-?\d+\.?\d*$/,
            message: "请输入数字",
            trigger: "blur",
          },
        ],
      },

      formArea: {
        name: "",
        remark: "",
        address: "",
      },
      addRulesArea: {
        name: [
          {
            required: true,
            message: "请填写区域名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    // this.creatQrCode(); // 创建二维码
  },
  methods: {
    // 图片批量下载到本地
    getImgArrayBuffer(url) {
      let _this = this;
      return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function() {
          if (this.status == 200) {
            resolve(this.response);
          } else {
            reject(this.status);
          }
        };
        xmlhttp.send();
      });
    },
    // 图片批量下载
    downImg() {
      this.$confirm("网速太慢或图片太多时，请耐心等待~", "温馨提示", {
        confirmButtonText: "我知道了，开始下载",

        showCancelButton: false,
        type: "success",
      }).then(() => {
        let _this = this;
        let zip = new JSZip();
        let cache = {};
        let promises = [];
        let images = this.imgsList;
        images.forEach((item, index) => {
          const promise = _this.getImgArrayBuffer(item).then((data) => {
            //解决之前ios 文件没有后缀名，电脑打不开的问题，默认加上png后缀，没有该问题的可去掉 这部分代码
            let file = item.split("/")[item.split("/").length - 1];
            let fileType = file.split(".");
            let filename;
            if (fileType.length == 1) {
              filename = _this.codeList[index].name + ".png"; //判断是ios没有后缀名的文件
            } else {
              filename = _this.codeList[index].name;
            }
            // --end
            zip.file(filename, data, {
              binary: true,
            });
            cache[filename] = data;
          });
          promises.push(promise);
        });

        Promise.all(promises)
          .then(() => {
            zip
              .generateAsync({
                type: "blob",
              })
              .then((content) => {
                FileSaver.saveAs(content, "二维码");
              });
          })
          .catch((res) => {
            _this.$message.error("文件压缩失败");
          });
      });
    },

    CanvasToImage(canvas) {
      //从canvas中提取图片image，新建image对象
      var image = new Image();
      // canvas.toDataURL 返回Base64编码的URL
      image.src = canvas.toDataURL("image/jpg");
      return image;
    },
    /* 创建二维码 */
    creatQrCode() {
      this.imgsList = [];
      this.codeList.forEach((e, index) => {
        new QRCode(this.$refs.qrCode[index], {
          text: `${this.$itsoftUI.config.inspectionUrl}?id=${e.id}`, // 二维码的内容
          width: 120,
          height: 120,
          colorDark: "#000",
          colorLight: "#fff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
      let canvasobjList = Array.prototype.slice.call(
        document.getElementsByTagName("canvas")
      );

      canvasobjList.forEach((e) => {
        this.imgsList.push(this.CanvasToImage(e).src);
      });
    },
    // 创建二维码
    downCode(row) {
      this.dialogCode = true;
      this.codeList = [row];
      setTimeout(() => {
        this.creatQrCode();
      }, 100);
    },
    // 获取全部区域生成web二维码
    getCodeList() {
      this.addloading = true;
      this.setSearchData();
      areaApi.codeList(JSON.stringify(this.search)).then((res) => {
        this.codeList = res.data;
        this.addloading = false;
        setTimeout(() => {
          this.creatQrCode();
        }, 100);
        this.loading = false;
      });
    },
    // 删除用户
    delUser(item, row) {
      this.$confirm("确定要删除当前选中的用户吗？", "删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃删除",
      })
        .then(() => {
          areaApi.deleteRegionUser(row.id, item.userId).then((res) => {
            this.$message.success("删除成功");
            this.areaList();
          });
        })
        .catch(() => {});
    },
    // 选中用户
    userSelectionChange(val) {
      this.userSelection = val;
    },
    // 获取用户
    getUserList() {
      this.addloading = true;
      let search = [
        {
          andOr: "and",
          searchField: "schoolcode",
          operator: "=",
          searchValue: this.$itsoftUI.config.schoolCode,
        },
        {
          andOr: "and",
          searchField: "systemcode",
          operator: "=",
          searchValue: "newRepair",
        },
      ];
      if (this.username) {
        search.push({
          andOr: "and",
          searchField: "account/name",
          operator: "like",
          searchValue: this.username,
        });
      }
      areaApi.userList(JSON.stringify(search)).then((res) => {
        let users = [...this.inspectorUser, ...this.managerUser];

        let list = res.data.filter(
          (item) => !users.some((ele) => ele.userId === item.id)
        );
        this.userList = list;
        this.addloading = false;
      });
    },
    // 添加用户
    addUser(row, type) {
      this.currentRow = row;
      this.dialogFormVisibleUser = true;
      this.type = type;
      this.inspectorUser = row.inspectorUser ? row.inspectorUser : [];
      this.managerUser = row.managerUser ? row.managerUser : [];
      this.saveType = "1";
      this.getUserList();
    },
    //保存
    addUserConfirm() {
      if (this.saveType === "1") {
        if (this.userSelection.length === 0) {
          this.$message.error("请选择用户");
          return false;
        }

        let list = [];
        this.userSelection.forEach((item) => {
          list.push({
            regionId: this.currentRow.id,
            type: this.type,
            userId: item.id,
            userName: item.name,
          });
        });
        this.addloading = true;
        areaApi
          .saveRegionUser(JSON.stringify(list))
          .then((e) => {
            this.dialogFormVisibleUser = false;
            this.areaList();
            this.$message.success("添加成功");
            this.addloading = false;
          })
          .catch(() => {
            this.dialogFormVisibleUser = false;
            this.addloading = false;
          });
      } else if (this.saveType === "2") {
        this.addloading = true;
        let ids = this.multipleSelection.map((e) => e.id);
        areaApi
          .batchSaveRegionUser(
            ids.toString(),
            this.type,
            JSON.stringify(
              this.userSelection.map((e) => {
                return {
                  userId: e.id,
                  userName: e.name,
                };
              })
            )
          )
          .then((res) => {
            this.dialogFormVisibleUser = false;
            this.areaList();
            this.$message.success("添加成功");
            this.addloading = false;
          })
          .catch(() => {
            this.dialogFormVisibleUser = false;
            this.addloading = false;
            this.$refs.dataListTable.clearSelection();
          });
      }
    },

    // 新增校区
    addBtn() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.addloading = true;
          areaApi.saveSchool(this.form).then((res) => {
            this.addloading = false;
            if (res.status == "success") {
              this.$message.success("提交成功");
              this.dialogFormVisibleSchool = false;
              this.addloading = false;
              this.$refs.addForm.clearValidate();
              this.$refs.addForm.resetFields();
              this.getSchoolList();
            }
          });
        } else {
          //   this.addloading = false;
          return false;
        }
      });
    },
    evtDialogClose() {
      this.form = {};
      this.formArea = {};
      this.codeList = [];
      if (this.$refs.qrCode && this.$refs.qrCode.length > 0) {
        this.$refs.qrCode.forEach((e) => {
          e.innerHTML = "";
        });
      }
    },
    activeClick(item, index) {
      this.currentIndex = index;
      this.searchObj.areaId = item.id;
      this.areaName = item.name;
      this.currentPage = 1;
      this.pageSize = 20;
      this.areaList();
    },

    // 校区信息
    getSchoolDetail(id) {
      this.addloading = true;

      areaApi.GetSchool(id).then((res) => {
        this.form = res.data;
        this.addloading = false;
      });
    },
    //删除校区
    delSchool(id) {
      this.$confirm("确定要删除当前选中的数据吗？", "删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃删除",
      })
        .then(() => {
          areaApi.DelSchool(id).then((res) => {
            if ((res.status = "success")) {
              this.$message.success("删除成功");
              this.getSchoolList();
              this.currentIndex = 0;
            }
          });
        })
        .catch(() => {});
    },
    event(key, row) {
      switch (key) {
        case "edit":
          this.dialogFormVisibleSchool = true;
          this.getSchoolDetail(row.id);
          break;
        case "del":
          this.delSchool(row.id);
          break;

        default:
          break;
      }
    },
    // 获取校区信息
    getSchoolList() {
      areaApi.schoolList().then((res) => {
        this.schoolList = res.data;
        if (this.schoolList.length > 0) {
          this.areaName = this.schoolList[0].name;
          this.searchObj.areaId = this.schoolList[0].id;
          this.areaList();
        }
      });
    },
    // 组装条件
    setSearchData() {
      this.search = [];
      for (const key in this.searchObj) {
        const item = this.searchObj[key];
        if (item) {
          if (key === "areaId") {
            this.search.push({
              andOr: "and",
              searchField: key,
              operator: "=",
              searchValue: item,
            });
          }
          if (key === "name") {
            this.search.push({
              andOr: "and",
              searchField: key,
              operator: "like",
              searchValue: item,
            });
          }
        }
      }
    },

    // 区域信息
    areaList() {
      this.loading = true;
      this.setSearchData();
      let page = {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
      };
      areaApi
        .List(
          JSON.stringify(page),
          JSON.stringify(this.search),
          "createTime desc"
        )
        .then((res) => {
          this.tableData = res.data.rows;
          this.totalRows = res.data.total;
          this.loading = false;
        });
    },
    evtPageSizeChange(val) {
      //每页数量
      this.pageSize = val;
      this.areaList();
    },
    evtPageCurrentChange(val) {
      //分页
      this.currentPage = val;
      this.areaList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tableDbEdit(currentRow) {
      //双击行
      this.currentRow = currentRow;
      this.getDetail();
    },
    evtTableRowChange(currentRow) {
      //单选行
      this.currentRow = currentRow;
    },
    // 区域事件
    areaEvent(key) {
      switch (key) {
        case "add":
          this.dialogFormVisibleArea = true;
          break;
        case "edit":
          if (!this.currentRow) {
            this.$message.error("请选中需要编辑的数据行");
            return;
          }
          this.getDetail();
          break;
        case "del":
          if (this.multipleSelection.length === 0) {
            this.$message.error("请选中要删除的数据");
            return;
          }
          this.del();
          break;
        case "code":
          this.dialogCode = true;
          this.getCodeList();
          break;
        case "batchInspectorUser":
          if (this.multipleSelection.length === 0) {
            this.$message.error("请选中要设置的数据");
            return false;
          }
          this.dialogFormVisibleUser = true;
          this.type = "1";
          this.saveType = "2";
          this.getUserList();
          break;
        case "batchManagerUser":
          if (this.multipleSelection.length === 0) {
            this.$message.error("请选中要设置的数据");
            return false;
          }
          this.dialogFormVisibleUser = true;
          this.type = "2";
          this.saveType = "2";
          this.getUserList();
          break;
        default:
          break;
      }
    },
    // 区域详情
    getDetail() {
      this.dialogFormVisibleArea = true;
      this.addLoading = true;
      areaApi
        .Get(this.currentRow.id)
        .then((res) => {
          this.formArea = res.data;
          this.addLoading = false;
        })
        .catch(() => {
          this.addLoading = false;
        });
    },
    // 删除
    del() {
      this.$confirm("确定要删除当前选中的数据吗？", "删除", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "放弃删除",
      })
        .then(() => {
          let idList = [];
          for (let i = 0; i < this.multipleSelection.length; i++) {
            idList.push(this.multipleSelection[i].id);
          }
          var ids = idList.join(",");
          areaApi.Del(ids).then((res) => {
            if ((res.status = "success")) {
              this.$message.success("删除成功");
              this.areaList();
            }
          });
        })
        .catch(() => {
          this.$refs.dataListTable.clearSelection();
        });
    },
    // 保存区域信息
    addBtnArea() {
      this.$refs.addFormArea.validate((valid) => {
        if (valid) {
          this.addloading = true;
          this.formArea.areaId = this.searchObj.areaId;
          this.formArea.areaName = this.areaName;
          areaApi.save(this.formArea).then((res) => {
            this.addloading = false;
            if (res.status == "success") {
              this.$message.success("提交成功");
              this.dialogFormVisibleArea = false;
              this.addloading = false;
              this.$refs.addFormArea.clearValidate();
              this.$refs.addFormArea.resetFields();
              this.areaList();
            }
          });
        } else {
          //   this.addloading = false;
          return false;
        }
      });
    },
  },
  created() {
    this.getSchoolList();
  },
};
</script>

<style lang="scss" scoped>
@media print {
  #print {
    padding-top: 35px;
    display: flex;
    column-gap: 60px;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    .qrItemBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2129;
      row-gap: 5px;
    }
  }
}
.workspace {
  .qrBox {
    display: flex;
    column-gap: 60px;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    .qrItemBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d2129;
      row-gap: 5px;
    }
  }
  .users {
    display: flex;
    align-items: center;
    column-gap: 5px;
    row-gap: 5px;
    margin-right: 5px;
    flex-wrap: wrap;
    .user-item {
      cursor: pointer;
      height: 24px;
      background: #f2f3f5;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 6px;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #1d2129;
      padding: 6px;
    }
  }
  .addArea {
    width: 50px;
    font-size: 14px;
    font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #00b38b;
    cursor: pointer;
    word-break: keep-all;
  }
  .title {
    display: flex;
    align-items: center;

    font-size: 16px;
    font-family: Alibaba PuHuiTi 2-65 Medium, Alibaba PuHuiTi 20;
    font-weight: normal;
    color: #1d2129;
    justify-content: space-between;
    align-items: center;
    .area {
      display: flex;
      column-gap: 8px;
      align-items: center;
    }

    .line {
      display: inline-block;
      width: 3px;
      height: 15px;
      background: #00b38b;
    }
    padding-bottom: 16px;
    border-bottom: 1px solid #eeeeee;
  }
  .left {
    width: 268px;
    background: #fff;
    margin-right: 10px;
    padding: 20px;

    .statusList {
      margin-top: 10px;
      .item {
        font-size: 14px;
        height: 42px;
        background: #fff;
        line-height: 42px;
        cursor: pointer;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
      }
      .activeItem {
        background: #e5f7f3;
        border-radius: 2px 2px 2px 2px;
        color: #00b38b;
      }
    }
  }
  .right {
    // padding: 20px;
    .selectList {
      display: flex;
      justify-content: flex-end;
      .select {
        display: flex;
        column-gap: 10px;
      }
      .btns {
        display: flex;
        column-gap: 12px;
        div {
          height: 32px;
          border-radius: 2px 2px 2px 2px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 1px 15px;
          cursor: pointer;
        }
        .add {
          background: #00b38b;
        }
        .edit {
          background: #3d83ff;
        }
        .del {
          background: #ff5c5e;
        }
        .ma {
          background: #3d83ff;
        }
        .userBatch,
        .user {
          color: #1d2129;
          border: 1px solid #c9cdd4;
        }
      }
    }
  }
}
</style>
